﻿@{
    ViewBag.Title = "新建无保单工单";
}
@using ZBJF.Warranty.BLL
@using ZBJF.Warranty.Common.Enums.Data
@using ZBJF.Warranty.Common.Enums.Certificate
@using ZBJF.Warranty.WebProvider
@using ZBJF.Warranty.Common.Enums.InsuranceWarranty;
@model ZBJF.Warranty.Model.InsuranceWarrantyRecord
@section Header{
    @Scripts.Render("~/bundles/datatable")
    @Styles.Render("~/Content/datatable")
}
<style>
    #img li {
        display: inline-block;
    }
</style>
<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#workOrderInfo" onclick="location.reload();">
            新建无保单工单
        </a>
    </li>
</ul>
@using (Html.BeginForm("SaveNoInsuranceOrderIWr", "ToBeCreateWorkOrder", FormMethod.Post, new { id = "inputForm", name = "inputForm", @class = "form-horizontal", enctype = "multipart/form-data" }))
{
    @Html.HiddenFor(n => n.InsuranceOrder.InsuranceProductID)
    @Html.HiddenFor(n => n.InsuranceOrder.SellerInsuranceProductID)
    @Html.HiddenFor(n => n.InsuranceOrder.EquipmentPrice)
    <table class="keep-all margin-b-10">
        <tr>
            <td>搜索保单归属：</td>
            <td>
                @Html.TextBox("Name", "", new { @class = "input-large", @placeholder = "销售商名称/销售商产品名称" })
            </td>
            <td>
                <input id="btnSubmit" class="btn btn-primary Search-R margin-l-10" type="button" value="搜索 " onclick="search();">
            </td>
        </tr>
    </table>
    <div class="table-responsive dataTables_wrapper">
        <table id="sellerInsuranceProductList" class="table table-striped table-bordered table-hover">
            <thead>
                <tr>
                    <th width="20">选择</th>
                    <th>保险产品类别</th>
                    <th>被保险设备类型</th>
                    <th>销售商产品名称</th>
                    <th>销售商名称</th>
                    <th>承保公司</th>
                    <th>保额</th>
                    <th>保险期限</th>
                </tr>
            </thead>
            @Html.HiddenFor(n => n.InsuranceOrder.InsuranceCategory)
        </table>
    </div>
    <br />
    <p style="font-size: 15px;">保单信息</p>
    <table class="table table-responsive table-bordered table-hover">
        <tr>
            <th class="w160">被保险人姓名：<span class="red">*</span></th>
            <td>@Html.TextBoxFor(o => o.InsuranceOrder.UserName, new { validate = "{required:true,messages:{required:'被保险人姓名必填！'}}", @class = "w-120", maxlength = 20 })</td>
            <th class="w160">被保险人电话：<span class="red">*</span></th>
            <td>@Html.TextBoxFor(o => o.InsuranceOrder.UserPhone, new { validate = "{required:true,isTel:true,messages:{required:'被保险人电话必填！'}}", @class = "w-120" })</td>
        </tr>
        <tr>
            <th>第三方保单号：<span class="red">*</span></th>
            <td>@Html.TextBoxFor(m => m.InsuranceOrder.ThirdUniqueNumber, new { validate = "{isRightfulStringNounderline:true,required:true,messages:{required:'请填写第三方保单号必填！'}}", maxlength = 25 })</td>
            <th>设备识别码：<span class="red">*</span></th>
            <td>@Html.TextBoxFor(m => m.InsuranceOrder.IMEI, new { validate = "{isRightfulStringNounderline:true,required:true,messages:{required:'请填写设备识别码必填！'}}", maxlength = 25 })</td>
        </tr>
        <tr>
            <th>证件类型：<span class="red">*</span></th>
            <td>@Html.DropDownListFor(m => m.InsuranceOrder.CertificateType, ConvertToSelector.Instance.EnumTypeConvertToSelectList(typeof(UserCertificateType), addEmptySelect: false), new { validate = "{required:true,messages:{required:'请选择证件类型！'}}" })</td>
            <th>证件号码：<span class="red">*</span></th>
            <td>@Html.TextBoxFor(m => m.InsuranceOrder.CertificateNO, new { maxlength = 25, validate = "{required:true,isRightfulStringNounderline:true,messages:{required:'请填写证件号码必填！'}}" })</td>
        </tr>
        <tr>
            <th>型号编码：</th>
            <td>@Html.TextBox("BrandModelCode","", new { @onfocus = "this.blur()" })<a onclick="OpenType()">点击查询</a></td>
            <th>品牌：</th>
            <td>@Html.TextBoxFor(o => o.InsuranceOrder.ProductBrandName, new { @placeholder = "不可编辑，根据型号编码带出", @onfocus = "this.blur()" })</td>
        </tr>
        <tr>
            <th>型号：</th>
            <td>@Html.TextBoxFor(o => o.InsuranceOrder.ProductModelName, new {@placeholder = "不可编辑，根据型号编码带出", @onfocus = "this.blur()"})</td>
            <th>保险起期：<span class="red">*</span></th>
            <td>
                <!--日期的并且使用||符合链接-->
                @Html.TextBoxFor(m => m.InsuranceOrder.ServiceStartTime, new { @class = "Wdate", onclick = "WdatePicker({maxDate:'#F{$dp.$D(\\'InsuranceOrder_ServiceEndTime\\')}'})", validate = "{required:true,messages:{required:'请填写保险起期必填！'}}" })
            </td>          
        </tr>
        <tr>
            <th>投保日期：<span class="red">*</span></th>
            <td>@Html.TextBoxFor(m => m.InsuranceOrder.CreateOrderTime, new { @class = "Wdate", onclick = "WdatePicker({maxDate:'#F{$dp.$D(\\'InsuranceOrder_ServiceStartTime\\')}'})", validate = "{required:true,messages:{required:'请填写投保日期必填！'}}" })</td>
            <th>保险止期：<span class="red">*</span></th>
            <td>@Html.TextBoxFor(m => m.InsuranceOrder.ServiceEndTime, new {@class = "Wdate", onclick = "WdatePicker({minDate:'#F{$dp.$D(\\'InsuranceOrder_ServiceStartTime\\')}'})", validate = "{required:true,messages:{required:'请填写保险止期必填！'}}"})</td>
        </tr>
    </table>
    <p style="font-size: 15px;">报案信息</p>
    <table class="table table-responsive table-bordered table-hover">
        <tr>
            <th>报案人：<span class="red">*</span></th>
            <td>@Html.TextBoxFor(m => m.Reporter, new { validate = "{required:true,messages:{required:'报案人必填！'}}", @class = "w-120", maxlength = 20})</td>
            <th>报案人电话：<span class="red">*</span></th>
            <td>@Html.TextBoxFor(m => m.ReporterPhone, new { validate = "{required:true,isTelphone:true,messages:{required:'报案人手机必填！'}}", @class = "w-120" })</td>
        </tr>
        <tr>
            <th>对接理赔员：</th>
            <td>@Html.TextBoxFor(m => m.InsuranceCompanyLossAdjusterName)</td>
            <th></th>
            <td></td>
        </tr>
    </table>
    <p style="font-size: 15px;">保单凭证</p>
    <div class="upload-file-contain">
        <ul id="img">
            <li id="img1">
                <div id="uploadDiv">
                    <span name="ImageType" multiple="multiple"><i class="icon-plus"></i></span>
                </div>
                <input type="file" id="inputfile" onchange="fileChange(this)" style="display: none" />
            </li>
        </ul>
    </div>
    <p style="font-size: 15px; padding-top:222px;">备注信息</p>
    <div>
        @Html.TextAreaFor(m => m.Remark, new { @class = "w-p98",maxlength = 200})
    </div>
    <div class="form-actions text-center">
        <input id="btnAuditAndPass" class="btn btn-primary Search-R margin-l-10" type="submit" value="新建工单">
        <input id="btnCancel" class="btn  Search-R margin-l-10" type="button" value="取消 " onclick="location.href = '/ToBeCreateWorkOrder/Index'">
    </div>
    @Html.HiddenFor(n => n.InsuranceOrder.ProductTypeId)
    @Html.HiddenFor(n => n.InsuranceOrder.DeviceType)
    @Html.HiddenFor(n => n.InsuranceOrder.InsuredAmount)
    @Html.HiddenFor(n => n.InsuranceOrder.InsuranceCompany)
    @Html.HiddenFor(n => n.InsuranceOrder.InsuranceCompanyID)
    @Html.HiddenFor(n => n.InsuranceOrder.InsuranceCompanyBranch)
    @Html.HiddenFor(n => n.InsuranceOrder.ProductName)
  <!--弹框__被保险设备型号-->
    <div class="layui-layer layui-layer-page" id="associatedProduct" style="z-index: 999;display:none; width: 430px; height:260px; top:0; left: 0;right:0;bottom:0;margin:auto;">
        <div class="layui-layer-title">确定被保险设备型号</div>
        <div id="" class="layui-layer-content" style="text-align:center;">
            <div class=" layim-add-box">
            <div class="layim-add-img" style="margin-left: 25px; margin-top: 10px;">
                <span class="inputTitle">品牌：</span>
                <span>@Html.DropDownList("ProductBrandsId", ConvertToSelector.Instance.ProductBrandConvertToSelectList(), new { @class = "w-p30", @onchange = "selectProductModelsList()" })</span>
                @Html.HiddenFor(n => n.InsuranceOrder.ProductBrandId)
            </div>
            <div class="layim-add-img" style="margin-left: 25px; margin-top: 10px;">
                <span class="inputTitle">型号：</span>
                <span>@Html.DropDownList("ProductModelsId", ConvertToSelector.Instance.ProductModelsConvertToSelectList(), new { @class = "w-p30", @onchange = "selectModelCode()" })</span>
                @Html.HiddenFor(n => n.InsuranceOrder.ProductModelId)
            </div>
            <div class="layim-add-img" style="margin-top: 10px;">
                <span class="inputTitle">型号编码：</span>
                <span><input type="text" class="w-p25" id="ModelCode" disabled="disabled" /></span>
            </div>
        </div>
        </div>
        <span class="layui-layer-setwin">
            <a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;" onclick="javascript: $('#associatedProduct').hide();"></a>
        </span>
        <div class="layui-layer-btn layui-layer-btn-" style="text-align:center;">
            <a class="layui-layer-btn0" id="addProductBtn">确认</a>
            <a class="layui-layer-btn1" id="cancelProductNoBtn">取消</a>
        </div>
    </div>
}
@section scripts{
    <script src="~/Scripts/uploadAdapter/jquery.loadscript.js"></script>
    <script src="~/Scripts/uploadAdapter/jquery.uploadAdapter.js"></script>
    <script type="text/javascript">
        var isSearch = false;
        $(function () {
            var objTable = $("#sellerInsuranceProductList")
                .dataTable({
                    fnDrawCallback: function () {
                        ControlPermissionOperate();
                    },
                    "sAjaxSource": "/ToBeCreateWorkOrder/GetSellerInsuranceProducts",
                    aoColumns: [
                        {
                            "mData": null,
                            "bSortable": false,
                            "fnRender": function (nRow) {
                                return "<input class='selectModel' type='checkbox' />";
                            }
                        },
                        {
                            "mData": null,
                            "bSortable": false,
                            "fnRender": function (nRow) {
                                return "<p InsuranceCategory='" + nRow.aData.InsuranceProductCategory + "'>" + nRow.aData.InsuranceProductCategoryDesc + "</p>";
                            }
                        },
                        {
                            "mData": null,
                            "bSortable": false,
                            "fnRender": function (nRow) {
                                return "<p InsuranceDevice='" + nRow.aData.InsuranceDevice + "' InsuranceDeviceType='" + nRow.aData.InsuranceDeviceType + "'>" + nRow.aData.InsuranceDeviceTypeDesc + "</p>";
                            }
                        },
                        {
                            "mData": null,
                            "bSortable": false,
                            "fnRender": function (nRow) {
                                return "<p SellerInsuranceProductId='" + nRow.aData.SellerInsuranceProductId + "' InsuranceProductId='" + nRow.aData.InsuranceProductId + "' InsuranceCompany='"+nRow.aData.ParentCompanyName+ "' InsuranceCompanyID='" + nRow.aData.InsuranceCompanyId + "'InsuranceCompanyBranch='"+nRow.aData.CompanyName+ "'>" + nRow.aData.ProductName + "</p>";
                            }
                        }, {
                            "mData": null,
                            "bSortable": false,
                            "fnRender": function (nRow) {
                                return "<p>" + nRow.aData.SellersName + "</p>";
                            }
                        },
                        { "mData": "CompanyNameDesc" },
                        { "mData": "Coverage" },
                        { "mData": "PolicyPeriodDesc" }
                    ]
                });
            $("#inputForm").submit(function () {
                if (($("#InsuranceOrder_DeviceType").val() - 0) == 0) {
                    layer.alert("请选择保单归属！");
                    return false;
                }
                var imglenght = $("#img li").length;
                if (imglenght < 2) { //
                    layer.alert("请至少上传一张保单凭证！");
                    return false;
                }
            });
            $("#connectOrderContent").hide();
            selectProductModelsList();
            selectModelCode();
            binding();
            emptyProduct();
        });
        //--------------理赔人员---------------
        $(document).on("click", ".selectModel", function () {
            $(this).parent().parent('tr').siblings('tr').find('input').removeAttr('checked');
            var obj = $(this).parent().siblings('td');
            $("#InsuranceOrder_ProductTypeId").val(obj.eq(1).find('p').attr("insurancedevice")); //被保险设备ID
            $("#InsuranceOrder_DeviceType").val(obj.eq(1).find('p').attr("InsuranceDeviceType")); //被保险设备类型ID
            $("#InsuranceOrder_InsuranceCategory").val(obj.eq(0).find('p').attr("InsuranceCategory"));
            $("#InsuranceOrder_SellerInsuranceProductID").val(obj.eq(2).find('p').attr("SellerInsuranceProductId"));
            $("#InsuranceOrder_InsuranceProductID").val(obj.eq(2).find('p').attr("InsuranceProductId"));
            $("#InsuranceOrder_ProductName").val(obj.eq(2).text());
            $("#InsuranceOrder_InsuranceCompany").val(obj.eq(2).find('p').attr("InsuranceCompany"));
            $("#InsuranceOrder_InsuranceCompanyID").val(obj.eq(2).find('p').attr("InsuranceCompanyID"));
            $("#InsuranceOrder_InsuranceCompanyBranch").val(obj.eq(2).find('p').attr("InsuranceCompanyBranch"));
            $("#InsuranceOrder_InsuredAmount").val(obj.eq(5).text());
            var companyName = obj.eq(4).text().split('-')[1];
            $.ajax({
                url: "/ToBeCreateWorkOrder/GetSystemUser",
                dataType: "json",
                type: "GET",
                async: false,
                data: { companyName: companyName },
                success: function (data) {
                    $("#InsuranceCompanyLossAdjusterName").empty();
                    if (!data.Result) {
                        layer.alert("没有承保公司！");
                        return;
                    }
                    var _option = "";
                    var index = 0;
                    data.Data.forEach(function (itemNo) {
                        if (index == 0)
                            _option += "<option dataId='" + itemNo.ID + "' value='" + itemNo.ID + "' selected>" + itemNo.UserDisPlayName + "</option>";
                        else
                            _option += "<option dataId='" + itemNo.ID + "' value='" + itemNo.ID + "'>" + itemNo.UserDisPlayName + "</option>";
                        index++;
                    })
                    $("#InsuranceCompanyLossAdjusterName").html(_option);
                }
            });
        });

        //--------------------------------------弹框__被保险设备型号 start-------------------------
        //关联_被保险设备型号
        function OpenType(parameters) {
            //emptyProduct(0);
            if (($("#InsuranceOrder_ProductBrandId").val() - 0) > 0 && ($("#InsuranceOrder_ProductModelId").val() - 0) > 0) {
            } else {
                var insuranceDeviceId = parseInt($("#InsuranceOrder_ProductTypeId").val()) || 0;
                if (insuranceDeviceId == 0) {
                    layer.alert("请选择销售商产品");
                    return false;
                } else
                    var _brandsId = document.getElementById("ProductBrandsId");
                var _modelsId = document.getElementById("ProductModelsId");
                $.ajax({
                    url: "/ToBeCreateWorkOrder/GetProductList",
                    dataType: "json",
                    type: "GET",
                    data: { insuranceDeviceId: insuranceDeviceId },
                    success: function (data) {
                        var _option = "<option value='' selected>请选择</option>";
                        if (!data.Result) {
                            binding(_brandsId, _option);
                            binding(_modelsId, _option);
                            return;
                        }
                        var index = 0;
                        data.Data.forEach(function (itemNo) {
                            _option += "<option dataId='" + itemNo.ID + "' value='" + itemNo.ID + "'>" + itemNo.BrandName + "</option>";
                            index++;
                        });
                        binding(_brandsId, _option);
                    }
                });
            }
            $("#associatedProduct").show();
        }

        //--------------------------------------品牌、型号 、型号编码 联动------------------------
        function selectProductModelsList() {
            var brandId = parseInt($("#ProductBrandsId").val()) || 0;
            var _modelId = document.getElementById("ProductModelsId");
            emptyProduct(1);
            $.ajax({
                url: "/ToBeCreateWorkOrder/GetProductModelsList",
                dataType: "json",
                type: "GET",
                data: { brandId: brandId },
                success: function (data) {
                    var _option = "<option value='' selected>请选择</option>";;
                    if (!data.Result) {
                        binding(_modelId, _option);
                        return;
                    }
                    var index = 0;
                    data.Data.forEach(function (itemNo) {
                        _option += "<option dataId='" + itemNo.ID + "' value='" + itemNo.ID + "'>" + itemNo.ModelName + "</option>";
                        index++;
                    });
                    binding(_modelId, _option);
                }
            });
        }

        function selectModelCode() {
            var modelId = parseInt($("#ProductModelsId").val()) || 0;
            emptyProduct(-1);
            $.ajax({
                url: "/ToBeCreateWorkOrder/GetProductModelsCode",
                dataType: "json",
                type: "GET",
                data: { modelId: modelId },
                success: function (data) {
                    if (!data.Result) {
                        return;
                    }
                    $("#ModelCode").val(data.Data);
                }
            });
        }

        //绑定
        function binding(obj, data) {
            debugger;
            $(obj).html(data);
        }

        //清空----品牌型号
        function emptyProduct(type) {
            if (type == 0) {
                $("#ProductBrandsId").empty();
            }
            if (type >= 0) {
                $("#ProductModelsId").empty();
            }
            $("#ModelCode").val("");
        }

        //保存品牌型号
        $("#addProductBtn").on("click", function () {
            var brandsId = parseInt($("#ProductBrandsId").val());
            var modelsId = parseInt($("#ProductModelsId").val());
            $("#InsuranceOrder_ProductBrandId").val(brandsId);
            $("#InsuranceOrder_ProductModelId").val(modelsId);
            $("#InsuranceOrder_ProductBrandName").val($("#ProductBrandsId option[value='" + brandsId + "']").html());
            $("#InsuranceOrder_ProductModelName").val($("#ProductModelsId option[value='" + modelsId + "']").html());
            $("#BrandModelCode").val($("#ModelCode").val());
            $("#associatedProduct").hide();
        });
        //关闭弹框——
        $("#cancelProductNoBtn").on("click", function () {
            $("#associatedProduct").hide();
        });

        function search() {
            queryParamList.Name = $("#Name").val();
            $("#sellerInsuranceProductList").dataTable().fnDraw();
        }

        //------------图片上传-------------

        function fileChange(e) {
            var f = e.files[0];
            if (f.size > 2048 * 1024) {
                alert("超过最大图片限制(2M)");
                return;
            }
            var fr = new FileReader();
            fr.readAsDataURL(f);
            debugger;
            fr.onload = function (f) {
                debugger;
                compressImg(this.result, 500, function (data) {
                    debugger;
                    var html = "<li style='position:relative;'><img class='product-img' src='" + data + "'>";
                    html += "<input type='hidden' name='InsuranceWarrantyRecordContractInfo' value='" + data + "'/>";
                    html += "<i class='product-img-remove icon-remove' onclick='DdRemove(this)'></i></li>";
                    $("#img1").before(html);
                    Binding();
                });
            };
        }
        var Binding = function () {
            $("#img li[id='img1']").siblings("li").mouseover(function () {
                $(this).children("img").next().show();
                event.stopPropagation();
            }).mouseout(function () {
                $(this).children("img").next().hide();
                event.stopPropagation();
            });
        }
        function DdRemove(obj) {
            $(obj).parent().remove();
        }

        $(function () {
            Binding();
            $("#uploadDiv").on("click", function () {
                var imglenght = $("#img li").length;
                if (imglenght < 10) { //最多允许上传9张
                    $("#inputfile").trigger("click");
                } else {
                    layer.msg("最多上传九张");
                    $("#inputfile").unbind("click");
                }
            });
        });
    </script>
}